<template>
	<view class="title_image" :style="style">
		<image @click="previewImage" :class="!loading?'load-fade':''" @load="loadingSuccess" :src="urls || defaultImg"
			:mode="mode" @error="onErrors">
		</image>
		<!-- <view class="loading_icon" v-if="showLoading && loading">
			<view class="circle" :style="formatLoadingColor"></view>
		</view> -->
		<view class="bgBox iamge22" v-if="showLoading && loading">
		</view>
	</view>
</template>

<script>
	import { array } from '@/libs/fn/verify.js'
	const userdefault = require('@/static/images/default/userdefault.png')
	const imagedefault = require('@/static/images/default/imagedefault.png')
	export default {
		name: 'm-image2',
		data() {
			return {
				urls: this.src,
				loading: false, // 默认加载loading
			};
		},
		props: {
			// image address
			src: {
				type: String,
				default: ''
			},
			//是否可预览图片
			isPreview: {
				type: Boolean,
				default: false
			},
			//defalut默认展位图   goods商品占位图    user用户占位图
			types: {
				type: String,
				default: 'defalut'
			},
			// margin
			spa: {
				default: '0',
				type: String,
			},
			// padding
			gap: {
				default: '0',
				type: String,
			},
			// 图片大小---宽高默认30
			size: {
				type: [Number, String, Array],
				default: ''
			},
			// 图片圆角
			radius: {
				type: String,
				default: '4',
			},
			overflow: {
				type: String,
				default: 'hidden'
			},
			// 图片显示模式
			mode: {
				type: String,
				default: 'aspectFill',
				/**
				 * 缩放
				 * scaleToFill   --- 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
				 * aspectFit   --- 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
				 * aspectFill   --- 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
				 * widthFix   --- 宽度不变，高度自动变化，保持原图宽高比不变
				 * heightFix   --- 高度不变，宽度自动变化，保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3。
				 * 裁剪 --- 不缩放图片
				 * bottom，center，left，right，top left，top right，bottom left，bottom right
				 */
			},
			// show loading
			showLoading: {
				type: Boolean,
				default: true
			},
			// loading icon color
			loadingColor: {
				type: String,
				default: 'var(--theme)'
			}
		},
		watch: {
			src(val) {
				this.urls = val
			},
		},
		computed: {
			formatLoadingColor() {
				return 'border-top-color:' + this.loadingColor;
			},
			defaultImg() {
				const res = {
					'defalut': imagedefault,
					'user': userdefault,
				} [this.types]
				return res
			},
			style() {
				let style = {},
					width = 30,
					height = 30;
				const radius = this.radius.split(" ").filter(x => x);
				const spa = this.spa.split(" ").filter(x => x);
				const gap = this.gap.split(" ").filter(x => x);
				if (this.size) {
					if (array(this.size)) {
						width = this.size[0]
						height = this.size[1]
					} else {
						height = width = this.size.toString()
					}
					style.width = `${width}rpx`
					style.height = `${height}rpx`
				}
				if (this.radius) {
					style.borderRadius = radius.map(n => `${n}rpx`).join(' ')
					style.overflow=this.overflow;
				}
				if (this.spa) {
					style.margin = spa.map(n => `${n}rpx`).join(' ')
				}
				if (this.gap) {
					style.padding = gap.map(n => `${n}rpx`).join(' ')
				}
				return style
			}
		},
		methods: {
			// 预览大图
			previewImage() {
				if (this.urls && this.isPreview) {
					uni.previewImage({
						urls: [this.urls],
					});
				}
			},
			// 加载成功
			loadingSuccess() {
				console.log('加载成功')
				this.loading = false;
			},
			// 加载错误
			onErrors(e) {
				console.log('加载错误')
				this.urls = imagedefault;
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 淡入效果
	.load-fade {
		opacity: 1;
		animation: fade 0.4s linear normal;
	}

	@keyframes fade {
		from {
			opacity: 0
		}

		to {
			opacity: 1
		}
	}

	.title_image {
		display: flex;
		justify-content: center;
		position: relative;
		height: 100%;
		width: 100%;

		// overflow: hidden;
		&>image {
			height: 100%;
		}

		.loading_icon {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.circle {
		box-sizing: border-box;
		width: 50rpx;
		height: 50rpx;
		border: 5rpx solid #f3f3f3;
		border-top: 5rpx solid;
		border-radius: 50%;
		/* 动画旋转效果 */
		animation: rotate-360 1s infinite linear;
	}

	@keyframes rotate-360 {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.bgBox {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		background-color: #f3f3f3;
	}

	.iamge22 {
		background: linear-gradient(-120deg, #f3f3f3 0%, #f7f7f7 30%, #f9f9f9 50%, #f7f7f7 80%, #f3f3f3 100%);
		/* 背景渐变 */
		background-size: 500% 500%;
		/* 背景大小 */
		animation: gradientBG 1.2s ease infinite;
		/* 应用动画 */
	}

	/* 定义 keyframes 动画 */
	@keyframes gradientBG {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}
</style>